Merge branch 'comment-paragraph-article' into 'master'

Make available comment paragraph discussion for creation and visualization See merge request !15

Merge branch 'comment-paragraph-article' into 'master'
Make available comment paragraph discussion for creation and visualization See merge request !15
Victor Costa
2 parents 9b3a27c9 34b11fee
Showing 36 changed files with 484 additions and 231 deletions Show diff stats
src/app/article/article-default-view.component.ts
src/app/article/article.html
src/app/article/basic-editor/basic-editor.component.spec.ts
src/app/article/basic-editor/basic-editor.component.ts
src/app/article/basic-editor/basic-editor.html
src/app/article/basic-editor/basic-editor.scss
src/app/article/cms/article-editor/article-editor.component.ts
src/app/article/cms/basic-editor/basic-editor.component.ts
src/app/article/cms/basic-editor/basic-editor.html
src/app/article/cms/basic-editor/basic-editor.scss
src/app/article/cms/basic-options/basic-options.component.ts
src/app/article/cms/basic-options/basic-options.html
src/app/article/cms/basic-options/basic-options.scss
src/app/article/cms/cms.component.spec.ts
src/app/article/cms/cms.component.ts
src/app/article/cms/cms.html
src/app/article/cms/cms.scss
src/app/article/comment/comment.html
src/app/article/comment/comments.scss
src/app/article/comment/post-comment/post-comment.component.spec.ts
@@ -3,6 +3,7 @@ import {ArticleBlogComponent} from &quot;./types/blog/blog.component&quot;;
 import {CommentsComponent} from "./comment/comments.component";
 import {MacroDirective} from "./macro/macro.directive";
 import {ArticleToolbarHotspotComponent} from "../hotspot/article-toolbar-hotspot.component";
+import {ArticleContentHotspotComponent} from "../hotspot/article-content-hotspot.component";
 /**
  * @ngdoc controller
@@ -33,7 +34,8 @@ export class ArticleDefaultViewComponent {
     selector: 'noosfero-article',
     template: 'not-used',
     directives: [ArticleDefaultViewComponent, ArticleBlogComponent,
-        CommentsComponent, MacroDirective, ArticleToolbarHotspotComponent]
+        CommentsComponent, MacroDirective, ArticleToolbarHotspotComponent,
+        ArticleContentHotspotComponent]
 })
 @Inject("$element", "$scope", "$injector", "$compile")
 export class ArticleViewComponent {
@@ -43,7 +45,8 @@ export class ArticleViewComponent {
     directiveName: string;
     ngOnInit() {
-        let specificDirective = 'noosfero' + this.article.type;
+        let articleType = this.article.type.replace(/::/, '');
+        let specificDirective = 'noosfero' + articleType;
         this.directiveName = "noosfero-default-article";
         if (this.$injector.has(specificDirective + 'Directive')) {
             this.directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
@@ -20,7 +20,7 @@
       </span>
     </div>
   </div>
-
+  <noosfero-hotspot-article-content [article]="ctrl.article"></noosfero-hotspot-article-content>
   <div class="page-body">
     <div bind-html-compile="ctrl.article.body"></div>
   </div>
@@ -1,84 +0,0 @@
-import {quickCreateComponent} from "../../../spec/helpers";
-import {BasicEditorComponent} from "./basic-editor.component";
-
-
-describe("Article BasicEditor", () => {
-
-    let $rootScope: ng.IRootScopeService;
-    let $q: ng.IQService;
-    let articleServiceMock: any;
-    let profileServiceMock: any;
-    let $state: any;
-    let $stateParams: any;
-    let $window: any;
-    let profile = { id: 1 };
-    let notification: any;
-
-
-    beforeEach(inject((_$rootScope_: ng.IRootScopeService, _$q_: ng.IQService) => {
-        $rootScope = _$rootScope_;
-        $q = _$q_;
-    }));
-
-    beforeEach(() => {
-        $window = jasmine.createSpyObj("$window", ["back"]);
-        $state = jasmine.createSpyObj("$state", ["go"]);
-        notification = jasmine.createSpyObj("notification", ["success"]);
-        profileServiceMock = jasmine.createSpyObj("profileServiceMock", ["setCurrentProfileByIdentifier"]);
-        articleServiceMock = jasmine.createSpyObj("articleServiceMock", ["createInParent", "updateArticle", "get"]);
-
-        $stateParams = { profile: "profile" };
-
-        let setCurrentProfileByIdentifierResponse = $q.defer();
-        setCurrentProfileByIdentifierResponse.resolve(profile);
-
-        let articleCreate = $q.defer();
-        articleCreate.resolve({ data: { path: "path", profile: { identifier: "profile" } } });
-
-        let articleGet = $q.defer();
-        articleGet.resolve({ data: { path: "parent-path", profile: { identifier: "profile" } } });
-
-        profileServiceMock.setCurrentProfileByIdentifier = jasmine.createSpy("setCurrentProfileByIdentifier").and.returnValue(setCurrentProfileByIdentifierResponse.promise);
-        articleServiceMock.createInParent = jasmine.createSpy("createInParent").and.returnValue(articleCreate.promise);
-        articleServiceMock.updateArticle = jasmine.createSpy("updateArticle").and.returnValue(articleCreate.promise);
-        articleServiceMock.get = jasmine.createSpy("get").and.returnValue(articleGet.promise);
-    });
-
-    it("create an article in the current profile when save", done => {
-        $stateParams['parent_id'] = 1;
-        let component: BasicEditorComponent = new BasicEditorComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
-        component.save();
-        $rootScope.$apply();
-        expect(profileServiceMock.setCurrentProfileByIdentifier).toHaveBeenCalled();
-        expect(articleServiceMock.createInParent).toHaveBeenCalledWith(1, component.article);
-        done();
-    });
-
-    it("got to the new article page and display an alert when saving sucessfully", done => {
-        let component: BasicEditorComponent = new BasicEditorComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
-        component.save();
-        $rootScope.$apply();
-        expect($state.go).toHaveBeenCalledWith("main.profile.page", { page: "path", profile: "profile" });
-        expect(notification.success).toHaveBeenCalled();
-        done();
-    });
-
-    it("go back when cancel article edition", done => {
-        let component: BasicEditorComponent = new BasicEditorComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
-        $window.history = { back: jasmine.createSpy('back') };
-        component.cancel();
-        expect($window.history.back).toHaveBeenCalled();
-        done();
-    });
-
-    it("edit existing article when save", done => {
-        $stateParams['parent_id'] = null;
-        $stateParams['id'] = 2;
-        let component: BasicEditorComponent = new BasicEditorComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
-        component.save();
-        $rootScope.$apply();
-        expect(articleServiceMock.updateArticle).toHaveBeenCalledWith(component.article);
-        done();
-    });
-
-});
@@ -1,69 +0,0 @@
-import {StateConfig, Component, Inject, provide} from 'ng-forward';
-import {ArticleService} from "../../../lib/ng-noosfero-api/http/article.service";
-import {ProfileService} from "../../../lib/ng-noosfero-api/http/profile.service";
-import {NotificationService} from "../../shared/services/notification.service.ts";
-
-@Component({
-    selector: 'article-basic-editor',
-    templateUrl: "app/article/basic-editor/basic-editor.html",
-    providers: [
-        provide('articleService', { useClass: ArticleService }),
-        provide('profileService', { useClass: ProfileService }),
-        provide('notification', { useClass: NotificationService })
-    ]
-})
-@Inject(ArticleService, ProfileService, "$state", NotificationService, "$stateParams", "$window")
-export class BasicEditorComponent {
-
-    article: noosfero.Article = <noosfero.Article>{ type: "TextArticle" };
-    parent: noosfero.Article = <noosfero.Article>{};
-
-    id: number;
-    parentId: number;
-    profileIdentifier: string;
-
-    constructor(private articleService: ArticleService,
-        private profileService: ProfileService,
-        private $state: ng.ui.IStateService,
-        private notification: NotificationService,
-        private $stateParams: ng.ui.IStateParamsService,
-        private $window: ng.IWindowService) {
-
-        this.parentId = this.$stateParams['parent_id'];
-        this.profileIdentifier = this.$stateParams["profile"];
-        this.id = this.$stateParams['id'];
-
-        if (this.parentId) {
-            this.articleService.get(this.parentId).then((result: noosfero.RestResult<noosfero.Article>) => {
-                this.parent = result.data;
-            });
-        }
-        if (this.id) {
-            this.articleService.get(this.id).then((result: noosfero.RestResult<noosfero.Article>) => {
-                this.article = result.data;
-                this.article.name = this.article.title; // FIXME
-            });
-        }
-    }
-
-    save() {
-        this.profileService.setCurrentProfileByIdentifier(this.profileIdentifier).then((profile: noosfero.Profile) => {
-            if (this.id) {
-                return this.articleService.updateArticle(this.article);
-            } else {
-                return this.articleService.createInParent(this.parentId, this.article);
-            }
-        }).then((response: noosfero.RestResult<noosfero.Article>) => {
-            let article = (<noosfero.Article>response.data);
-            this.$state.go('main.profile.page', { page: article.path, profile: article.profile.identifier });
-            this.notification.success({ title: "article.basic_editor.success.title", message: "article.basic_editor.success.message" });
-        }).catch(() => {
-            this.notification.error({ message: "article.basic_editor.save.failed" });
-        });
-    }
-
-    cancel() {
-        this.$window.history.back();
-    }
-
-}
@@ -1,34 +0,0 @@
-<div class="basic-editor">
-  <div class="row">
-    <div class="col-md-1"></div>
-    <div class="col-md-8">
-      <form>
-        <div class="form-group">
-          <label for="titleInput">{{"article.basic_editor.title" | translate}}</label>
-          <input type="text" class="form-control" id="titleInput" placeholder="{{'article.basic_editor.title' | translate}}" ng-model="vm.article.name">
-        </div>
-        <div class="form-group">
-          <label for="bodyInput">{{"article.basic_editor.body" | translate}}</label>
-          <html-editor [(value)]="vm.article.body"></html-editor>
-        </div>
-        <button type="submit" class="btn btn-default" ng-click="vm.save()">{{"article.basic_editor.save" | translate}}</button>
-        <button type="button" class="btn btn-danger" ng-click="vm.cancel()">{{"article.basic_editor.cancel" | translate}}</button>
-      </form>
-    </div>
-    <div class="side-options">
-      <div class="visibility panel panel-default">
-        <div class="panel-heading">{{"article.basic_editor.visibility" | translate}}</div>
-        <div class="panel-body">
-          <div>
-            <input type="radio" ng-model="vm.article.published" ng-value="true"> 
-            <i class="fa fa-unlock fa-fw"></i> {{"article.basic_editor.visibility.public" | translate}}
-          </div>
-          <div>
-            <input type="radio" ng-model="vm.article.published" ng-value="false">
-            <i class="fa fa-lock fa-fw"></i> {{"article.basic_editor.visibility.private" | translate}}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
@@ -1,21 +0,0 @@
-.basic-editor {
-  @extend .container-fluid;
-  padding: 0 1%;
-
-  .side-options {
-    @extend .col-md-3;
-    margin-top: 25px;
-
-    .visibility {
-      .panel-heading {
-        background-color: transparent;
-        font-weight: bold;
-      }
-      .panel-body {
-        i {
-          color: #A5A5A5;
-        }
-      }
-    }
-  }
-}
@@ -0,0 +1,27 @@
+import {Component, Input, Inject} from 'ng-forward';
+
+@Component({
+    selector: 'article-editor',
+    template: "not-used"
+})
+@Inject("$element", "$scope", "$injector", "$compile")
+export class ArticleEditorComponent {
+
+    @Input() article: noosfero.Article;
+
+    constructor(
+        private $element: any,
+        private $scope: ng.IScope,
+        private $injector: ng.auto.IInjectorService,
+        private $compile: ng.ICompileService) { }
+
+    ngOnInit() {
+        let articleType = this.article.type.replace(/::/, '');
+        let specificDirective = `${articleType.charAt(0).toLowerCase()}${articleType.substring(1)}Editor`;
+        let directiveName = "article-basic-editor";
+        if (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));
+    }
+}
@@ -0,0 +1,10 @@
+import {Component, Input} from 'ng-forward';
+
+@Component({
+    selector: 'article-basic-editor',
+    templateUrl: "app/article/cms/basic-editor/basic-editor.html"
+})
+export class BasicEditorComponent {
+
+    @Input() article: noosfero.Article;
+}
@@ -0,0 +1,10 @@
+<form>
+  <div class="form-group">
+    <label for="titleInput">{{"article.basic_editor.title" | translate}}</label>
+    <input type="text" class="form-control" id="titleInput" placeholder="{{'article.basic_editor.title' | translate}}" ng-model="ctrl.article.name">
+  </div>
+  <div class="form-group">
+    <label for="bodyInput">{{"article.basic_editor.body" | translate}}</label>
+    <html-editor [(value)]="ctrl.article.body"></html-editor>
+  </div>
+</form>
@@ -0,0 +1,11 @@
+import {Component, Input} from 'ng-forward';
+
+@Component({
+    selector: 'article-basic-options',
+    templateUrl: "app/article/cms/basic-options/basic-options.html"
+})
+export class BasicOptionsComponent {
+
+    @Input() article: noosfero.Article;
+
+}
@@ -0,0 +1,15 @@
+<div class="side-options">
+  <div class="visibility panel panel-default">
+    <div class="panel-heading">{{"article.basic_editor.visibility" | translate}}</div>
+    <div class="panel-body">
+      <div>
+        <input type="radio" ng-model="ctrl.article.published" ng-value="true"> 
+        <i class="fa fa-unlock fa-fw"></i> {{"article.basic_editor.visibility.public" | translate}}
+      </div>
+      <div>
+        <input type="radio" ng-model="ctrl.article.published" ng-value="false">
+        <i class="fa fa-lock fa-fw"></i> {{"article.basic_editor.visibility.private" | translate}}
+      </div>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,15 @@
+.side-options {
+  margin-top: 25px;
+
+  .visibility {
+    .panel-heading {
+      background-color: transparent;
+      font-weight: bold;
+    }
+    .panel-body {
+      i {
+        color: #A5A5A5;
+      }
+    }
+  }
+}
@@ -0,0 +1,84 @@
+import {quickCreateComponent} from "../../../spec/helpers";
+import {CmsComponent} from "./cms.component";
+
+
+describe("Article Cms", () => {
+
+    let $rootScope: ng.IRootScopeService;
+    let $q: ng.IQService;
+    let articleServiceMock: any;
+    let profileServiceMock: any;
+    let $state: any;
+    let $stateParams: any;
+    let $window: any;
+    let profile = { id: 1 };
+    let notification: any;
+
+
+    beforeEach(inject((_$rootScope_: ng.IRootScopeService, _$q_: ng.IQService) => {
+        $rootScope = _$rootScope_;
+        $q = _$q_;
+    }));
+
+    beforeEach(() => {
+        $window = jasmine.createSpyObj("$window", ["back"]);
+        $state = jasmine.createSpyObj("$state", ["go"]);
+        notification = jasmine.createSpyObj("notification", ["success"]);
+        profileServiceMock = jasmine.createSpyObj("profileServiceMock", ["setCurrentProfileByIdentifier"]);
+        articleServiceMock = jasmine.createSpyObj("articleServiceMock", ["createInParent", "updateArticle", "get"]);
+
+        $stateParams = { profile: "profile" };
+
+        let setCurrentProfileByIdentifierResponse = $q.defer();
+        setCurrentProfileByIdentifierResponse.resolve(profile);
+
+        let articleCreate = $q.defer();
+        articleCreate.resolve({ data: { path: "path", profile: { identifier: "profile" } } });
+
+        let articleGet = $q.defer();
+        articleGet.resolve({ data: { path: "parent-path", profile: { identifier: "profile" } } });
+
+        profileServiceMock.setCurrentProfileByIdentifier = jasmine.createSpy("setCurrentProfileByIdentifier").and.returnValue(setCurrentProfileByIdentifierResponse.promise);
+        articleServiceMock.createInParent = jasmine.createSpy("createInParent").and.returnValue(articleCreate.promise);
+        articleServiceMock.updateArticle = jasmine.createSpy("updateArticle").and.returnValue(articleCreate.promise);
+        articleServiceMock.get = jasmine.createSpy("get").and.returnValue(articleGet.promise);
+    });
+
+    it("create an article in the current profile when save", done => {
+        $stateParams['parent_id'] = 1;
+        let component: CmsComponent = new CmsComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
+        component.save();
+        $rootScope.$apply();
+        expect(profileServiceMock.setCurrentProfileByIdentifier).toHaveBeenCalled();
+        expect(articleServiceMock.createInParent).toHaveBeenCalledWith(1, component.article);
+        done();
+    });
+
+    it("got to the new article page and display an alert when saving sucessfully", done => {
+        let component: CmsComponent = new CmsComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
+        component.save();
+        $rootScope.$apply();
+        expect($state.go).toHaveBeenCalledWith("main.profile.page", { page: "path", profile: "profile" });
+        expect(notification.success).toHaveBeenCalled();
+        done();
+    });
+
+    it("go back when cancel article edition", done => {
+        let component: CmsComponent = new CmsComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
+        $window.history = { back: jasmine.createSpy('back') };
+        component.cancel();
+        expect($window.history.back).toHaveBeenCalled();
+        done();
+    });
+
+    it("edit existing article when save", done => {
+        $stateParams['parent_id'] = null;
+        $stateParams['id'] = 2;
+        let component: CmsComponent = new CmsComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
+        component.save();
+        $rootScope.$apply();
+        expect(articleServiceMock.updateArticle).toHaveBeenCalledWith(component.article);
+        done();
+    });
+
+});
@@ -0,0 +1,74 @@
+import {StateConfig, Component, Inject, provide} from 'ng-forward';
+import {ArticleService} from "../../../lib/ng-noosfero-api/http/article.service";
+import {ProfileService} from "../../../lib/ng-noosfero-api/http/profile.service";
+import {NotificationService} from "../../shared/services/notification.service.ts";
+import {BasicOptionsComponent} from './basic-options/basic-options.component';
+import {BasicEditorComponent} from './basic-editor/basic-editor.component';
+import {ArticleEditorComponent} from './article-editor/article-editor.component';
+
+@Component({
+    selector: 'article-cms',
+    templateUrl: "app/article/cms/cms.html",
+    providers: [
+        provide('articleService', { useClass: ArticleService }),
+        provide('profileService', { useClass: ProfileService }),
+        provide('notification', { useClass: NotificationService })
+    ],
+    directives: [ArticleEditorComponent, BasicOptionsComponent, BasicEditorComponent]
+})
+@Inject(ArticleService, ProfileService, "$state", NotificationService, "$stateParams", "$window")
+export class CmsComponent {
+
+    article: noosfero.Article;
+    parent: noosfero.Article = <noosfero.Article>{};
+
+    id: number;
+    parentId: number;
+    profileIdentifier: string;
+
+    constructor(private articleService: ArticleService,
+        private profileService: ProfileService,
+        private $state: ng.ui.IStateService,
+        private notification: NotificationService,
+        private $stateParams: ng.ui.IStateParamsService,
+        private $window: ng.IWindowService) {
+
+        this.parentId = this.$stateParams['parent_id'];
+        this.profileIdentifier = this.$stateParams["profile"];
+        this.id = this.$stateParams['id'];
+
+        if (this.parentId) {
+            this.article = <noosfero.Article>{ type: this.$stateParams['type'] || "TextArticle", published: true };
+            this.articleService.get(this.parentId).then((result: noosfero.RestResult<noosfero.Article>) => {
+                this.parent = result.data;
+            });
+        }
+        if (this.id) {
+            this.articleService.get(this.id).then((result: noosfero.RestResult<noosfero.Article>) => {
+                this.article = result.data;
+                this.article.name = this.article.title; // FIXME
+            });
+        }
+    }
+
+    save() {
+        this.profileService.setCurrentProfileByIdentifier(this.profileIdentifier).then((profile: noosfero.Profile) => {
+            if (this.id) {
+                return this.articleService.updateArticle(this.article);
+            } else {
+                return this.articleService.createInParent(this.parentId, this.article);
+            }
+        }).then((response: noosfero.RestResult<noosfero.Article>) => {
+            let article = (<noosfero.Article>response.data);
+            this.$state.go('main.profile.page', { page: article.path, profile: article.profile.identifier });
+            this.notification.success({ title: "article.basic_editor.success.title", message: "article.basic_editor.success.message" });
+        }).catch(() => {
+            this.notification.error({ message: "article.basic_editor.save.failed" });
+        });
+    }
+
+    cancel() {
+        this.$window.history.back();
+    }
+
+}
@@ -0,0 +1,18 @@
+<div class="cms">
+  <div class="row">
+    <div class="col-md-1"></div>
+    <div class="col-md-8">
+      <article-editor ng-if="vm.article" [article]="vm.article"></article-editor>
+    </div>
+    <div class="col-md-3">
+      <article-basic-options ng-if="vm.article" [article]="vm.article"></article-basic-options>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-1"></div>
+    <div class="col-md-8">
+      <button type="submit" class="btn btn-default" ng-click="vm.save()">{{"article.basic_editor.save" | translate}}</button>
+      <button type="button" class="btn btn-danger" ng-click="vm.cancel()">{{"article.basic_editor.cancel" | translate}}</button>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,4 @@
+.cms {
+  @extend .container-fluid;
+  padding: 0 1%;
+}
@@ -18,7 +18,7 @@
     <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">
+      <a href="#" (click)="ctrl.reply()" class="small text-muted" ng-if="ctrl.article.accept_comments">
         {{"comment.reply" | translate}}
       </a>
     </div>
@@ -0,0 +1,6 @@
+.comments {
+  border-top: 2px solid #F3F3F3;
+  .comments {
+    border-top: 0;
+  }
+}
@@ -7,6 +7,8 @@ const htmlTemplate: string = &#39;&lt;noosfero-post-comment [article]=&quot;ctrl.article&quot; [r
 describe("Components", () => {
     describe("Post Comment Component", () => {
+        let properties = { article: { id: 1, accept_comments: true } };
+
         beforeEach(angular.mock.module("templates"));
         let commentService = jasmine.createSpyObj("commentService", ["createInArticle"]);
@@ -19,7 +21,7 @@ describe(&quot;Components&quot;, () =&gt; {
         @Component({ selector: 'test-container-component', directives: [PostCommentComponent], template: htmlTemplate, providers: providers })
         class ContainerComponent {
-            article = { id: 1 };
+            article = properties['article'];
             comment = { id: 2 };
         }
@@ -30,6 +32,14 @@ describe(&quot;Components&quot;, () =&gt; {
             });
         });
+        it("not render the post comment form when article doesn't accept comments", done => {
+            properties['article'].accept_comments = false;
+            helpers.createComponentFromClass(ContainerComponent).then(fixture => {
+                expect(fixture.debugElement.queryAll("form").length).toEqual(0);
+                done();
+            });
+        });
+
         it("emit an event when create comment", done => {
             helpers.createComponentFromClass(ContainerComponent).then(fixture => {
                 let component: PostCommentComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
-<form class="clearfix post-comment">
+<form class="clearfix post-comment" ng-if="ctrl.article.accept_comments">
   <div class="form-group">
     <div class="comment media">
       <div class="media-left">
 .comments {
   .post-comment {
     .media {
-      border-top: 2px solid #F3F3F3;
       padding-top: 10px;
       .media-left {
         padding: 10px 0;
@@ -0,0 +1,25 @@
+import {Component, Input, Inject} from "ng-forward";
+import * as plugins from "../../plugins";
+import {dasherize} from "ng-forward/cjs/util/helpers";
+import {PluginHotspot} from "./plugin-hotspot";
+
+@Component({
+    selector: "noosfero-hotspot-article-content",
+    template: "<span></span>"
+})
+@Inject("$element", "$scope", "$compile")
+export class ArticleContentHotspotComponent extends PluginHotspot {
+
+    @Input() article: noosfero.Article;
+
+    constructor(
+        private $element: any,
+        private $scope: ng.IScope,
+        private $compile: ng.ICompileService) {
+        super("article_extra_content");
+    }
+
+    addHotspot(directiveName: string) {
+        this.$element.append(this.$compile('<' + directiveName + ' [article]="ctrl.article"></' + directiveName + '>')(this.$scope));
+    }
+}
 import {StateConfig, Component, Inject, provide} from 'ng-forward';
 import {ProfileInfoComponent} from './info/profile-info.component';
 import {ProfileHomeComponent} from './profile-home.component';
-import {BasicEditorComponent} from '../article/basic-editor/basic-editor.component';
+import {BasicEditorComponent} from '../article/cms/basic-editor/basic-editor.component';
+import {CmsComponent} from '../article/cms/cms.component';
 import {ContentViewerComponent} from "../article/content-viewer/content-viewer.component";
 import {ContentViewerActionsComponent} from "../article/content-viewer/content-viewer-actions.component";
 import {ActivitiesComponent} from "./activities/activities.component";
@@ -46,12 +47,12 @@ import {MyProfileComponent} from &quot;./myprofile.component&quot;;
     },
     {
         name: 'main.cms',
-        url: "^/myprofile/:profile/cms?parent_id",
-        component: BasicEditorComponent,
+        url: "^/myprofile/:profile/cms?parent_id&type",
+        component: CmsComponent,
         views: {
             "content": {
-                templateUrl: "app/article/basic-editor/basic-editor.html",
-                controller: BasicEditorComponent,
+                templateUrl: "app/article/cms/cms.html",
+                controller: CmsComponent,
                 controllerAs: "vm"
             }
         }
@@ -59,11 +60,11 @@ import {MyProfileComponent} from &quot;./myprofile.component&quot;;
     {
         name: 'main.cmsEdit',
         url: "^/myprofile/:profile/cms/edit/:id",
-        component: BasicEditorComponent,
+        component: CmsComponent,
         views: {
             "content": {
-                templateUrl: "app/article/basic-editor/basic-editor.html",
-                controller: BasicEditorComponent,
+                templateUrl: "app/article/cms/cms.html",
+                controller: CmsComponent,
                 controllerAs: "vm"
             }
         }
@@ -27,7 +27,13 @@ export class ArticleService extends RestangularService&lt;noosfero.Article&gt; {
             'Content-Type': 'application/json'
         };
         let deferred = this.$q.defer<noosfero.RestResult<noosfero.Article>>();
-        let attributesToUpdate: any = { article: { name: article.name, body: article.body, published: article.published } };
+        // TODO dynamically copy the selected attributes to update
+        let attributesToUpdate: any = {
+            article: {
+                name: article.name, body: article.body, published: article.published,
+                start_date: article['start_date'], end_date: article['end_date']
+            }
+        };
         let restRequest: ng.IPromise<noosfero.RestResult<noosfero.Article>> = this.getElement(article.id).customPOST(attributesToUpdate, null, null, headers);
         restRequest.then(this.getHandleSuccessFunction(deferred))
             .catch(this.getHandleErrorFunction(deferred));
 namespace noosfero {
-    export interface Article  extends RestModel {
+    export interface Article extends RestModel {
         path: string;
         profile: Profile;
         type: string;
-		parent: Article;
+        parent: Article;
         body: string;
         title: string;
         name: string;
         published: boolean;
         setting: any;
+        start_date: string;
+        end_date: string;
     }
-}
 \ No newline at end of file
+}
@@ -0,0 +1,39 @@
+import {Component, Input, Inject} from 'ng-forward';
+
+@Component({
+    selector: 'comment-paragraph-plugin-discussion-editor',
+    templateUrl: "plugins/comment_paragraph/article/cms/discussion-editor/discussion-editor.html"
+})
+@Inject("$scope")
+export class DiscussionEditorComponent {
+
+    @Input() article: noosfero.Article;
+    start_date: Date;
+    end_date: Date;
+
+    constructor(private $scope: ng.IScope) {
+        this.convertDate('start_date');
+        this.convertDate('end_date');
+    }
+
+    convertDate(attributeName: string) {
+        this.$scope.$watch(() => {
+            return (<any>this)[attributeName];
+        }, () => {
+            if ((<any>this)[attributeName]) {
+                (<any>this.article)[attributeName] = (<any>this)[attributeName].toISOString();
+            }
+        });
+    }
+
+    ngOnInit() {
+        if (this.article.start_date) {
+            this.start_date = new Date(this.article.start_date);
+        } else {
+            this.start_date = moment().toDate();
+        }
+        if (this.article.end_date) {
+            this.end_date = new Date(this.article.end_date);
+        }
+    }
+}
@@ -0,0 +1,35 @@
+<form>
+  <div class="form-group">
+    <label for="titleInput">{{"article.basic_editor.title" | translate}}</label>
+    <input type="text" class="form-control" id="titleInput" placeholder="{{'article.basic_editor.title' | translate}}" ng-model="ctrl.article.name">
+  </div>
+  <div class="form-group">
+  
+    <div class="form-inline">
+      <span class="start-date discussion-date">
+        <label for="startDateInput">{{"comment-paragraph-plugin.discussion.editor.start_date.label" | translate}}</label>
+        <input id="startDateInput" type="text" class="form-control" uib-datepicker-popup ng-model="ctrl.start_date" 
+          is-open="startDateOpened" ng-required="true" close-text="Close" />
+        <span class="input-group-btn date-popup-button">
+          <button type="button" class="btn btn-default" ng-click="startDateOpened = true">
+            <i class="fa fa-calendar fa-fw"></i>
+          </button>
+        </span>
+      </span>
+      <span class="end-date discussion-date">
+        <label for="endDateInput">{{"comment-paragraph-plugin.discussion.editor.end_date.label" | translate}}</label>
+        <input id="endDateInput" type="text" class="form-control" uib-datepicker-popup ng-model="ctrl.end_date" 
+          is-open="endDateOpened" ng-required="true" close-text="Close" />
+        <span class="date-popup-button">
+          <button type="button" class="btn btn-default" ng-click="endDateOpened = true">
+            <i class="fa fa-calendar fa-fw"></i>
+          </button>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="bodyInput">{{"article.basic_editor.body" | translate}}</label>
+    <html-editor [(value)]="ctrl.article.body"></html-editor>
+  </div>
+</form>
@@ -0,0 +1,14 @@
+comment-paragraph-plugin-discussion-editor {
+  .discussion-date {
+      [uib-datepicker-popup-wrap] {
+        display: inline-block;
+      }
+      .date-popup-button {
+        @extend .input-group-btn;
+        display: inline-block;
+      }
+  }
+  .end-date {
+    margin-left: 60px;
+  }
+}
@@ -0,0 +1,12 @@
+import { Input, Inject, Component } from "ng-forward";
+import {Hotspot} from "../../../../app/hotspot/hotspot.decorator";
+
+@Component({
+    selector: "comment-paragraph-article-content-hotspot",
+    templateUrl: "plugins/comment_paragraph/hotspot/article-content/article-content.html",
+})
+@Hotspot("article_extra_content")
+export class CommentParagraphArticleContentHotspotComponent {
+
+    @Input() article: noosfero.Article;
+}
@@ -0,0 +1,11 @@
+<div class="discussion-header">
+  <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>
@@ -0,0 +1,20 @@
+.discussion-header {
+  @extend .pull-right;
+  margin-bottom: 20px;
+  .date {
+    text-transform: lowercase;
+    font-size: 16px;
+    .description {
+      font-weight: bold;
+      color: #BFBFBF;
+    }
+    .value {
+      font-size: 15px;
+      color: #969696;
+    }
+  }
+  .description {
+    font-weight: bold;
+    color: #BFBFBF;
+  }
+}
 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";
-export let mainComponents: any = [AllowCommentComponent];
-export let hotspots: any = [CommentParagraphArticleButtonHotspotComponent, CommentParagraphFormHotspotComponent];
+export let mainComponents: any = [AllowCommentComponent, DiscussionEditorComponent];
+export let hotspots: any = [CommentParagraphArticleButtonHotspotComponent, CommentParagraphFormHotspotComponent, CommentParagraphArticleContentHotspotComponent];
 {
-  "comment-paragraph-plugin.title": "Paragraph Comments"
+  "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.title": "Comentários por Parágrafo"
+  "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-side-comments {
   .comments {
+    min-height: 20px;
+    border-top: 0;
     .comment {
       margin: 0;
       &.media {
	@@ -20,7 +20,7 @@		@@ -20,7 +20,7 @@
20	</span>	20	</span>
21	</div>	21	</div>
22	</div>	22	</div>
23	-	23	+ <noosfero-hotspot-article-content [article]="ctrl.article"></noosfero-hotspot-article-content>
24	<div class="page-body">	24	<div class="page-body">
25	<div bind-html-compile="ctrl.article.body"></div>	25	<div bind-html-compile="ctrl.article.body"></div>
26	</div>	26	</div>
	@@ -1,84 +0,0 @@	@@ -1,84 +0,0 @@
1	-import {quickCreateComponent} from "../../../spec/helpers";
2	-import {BasicEditorComponent} from "./basic-editor.component";
3	-
4	-
5	-describe("Article BasicEditor", () => {
6	-
7	- let $rootScope: ng.IRootScopeService;
8	- let $q: ng.IQService;
9	- let articleServiceMock: any;
10	- let profileServiceMock: any;
11	- let $state: any;
12	- let $stateParams: any;
13	- let $window: any;
14	- let profile = { id: 1 };
15	- let notification: any;
16	-
17	-
18	- beforeEach(inject((_$rootScope_: ng.IRootScopeService, _$q_: ng.IQService) => {
19	- $rootScope = _$rootScope_;
20	- $q = _$q_;
21	- }));
22	-
23	- beforeEach(() => {
24	- $window = jasmine.createSpyObj("$window", ["back"]);
25	- $state = jasmine.createSpyObj("$state", ["go"]);
26	- notification = jasmine.createSpyObj("notification", ["success"]);
27	- profileServiceMock = jasmine.createSpyObj("profileServiceMock", ["setCurrentProfileByIdentifier"]);
28	- articleServiceMock = jasmine.createSpyObj("articleServiceMock", ["createInParent", "updateArticle", "get"]);
29	-
30	- $stateParams = { profile: "profile" };
31	-
32	- let setCurrentProfileByIdentifierResponse = $q.defer();
33	- setCurrentProfileByIdentifierResponse.resolve(profile);
34	-
35	- let articleCreate = $q.defer();
36	- articleCreate.resolve({ data: { path: "path", profile: { identifier: "profile" } } });
37	-
38	- let articleGet = $q.defer();
39	- articleGet.resolve({ data: { path: "parent-path", profile: { identifier: "profile" } } });
40	-
41	- profileServiceMock.setCurrentProfileByIdentifier = jasmine.createSpy("setCurrentProfileByIdentifier").and.returnValue(setCurrentProfileByIdentifierResponse.promise);
42	- articleServiceMock.createInParent = jasmine.createSpy("createInParent").and.returnValue(articleCreate.promise);
43	- articleServiceMock.updateArticle = jasmine.createSpy("updateArticle").and.returnValue(articleCreate.promise);
44	- articleServiceMock.get = jasmine.createSpy("get").and.returnValue(articleGet.promise);
45	- });
46	-
47	- it("create an article in the current profile when save", done => {
48	- $stateParams['parent_id'] = 1;
49	- let component: BasicEditorComponent = new BasicEditorComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
50	- component.save();
51	- $rootScope.$apply();
52	- expect(profileServiceMock.setCurrentProfileByIdentifier).toHaveBeenCalled();
53	- expect(articleServiceMock.createInParent).toHaveBeenCalledWith(1, component.article);
54	- done();
55	- });
56	-
57	- it("got to the new article page and display an alert when saving sucessfully", done => {
58	- let component: BasicEditorComponent = new BasicEditorComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
59	- component.save();
60	- $rootScope.$apply();
61	- expect($state.go).toHaveBeenCalledWith("main.profile.page", { page: "path", profile: "profile" });
62	- expect(notification.success).toHaveBeenCalled();
63	- done();
64	- });
65	-
66	- it("go back when cancel article edition", done => {
67	- let component: BasicEditorComponent = new BasicEditorComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
68	- $window.history = { back: jasmine.createSpy('back') };
69	- component.cancel();
70	- expect($window.history.back).toHaveBeenCalled();
71	- done();
72	- });
73	-
74	- it("edit existing article when save", done => {
75	- $stateParams['parent_id'] = null;
76	- $stateParams['id'] = 2;
77	- let component: BasicEditorComponent = new BasicEditorComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
78	- component.save();
79	- $rootScope.$apply();
80	- expect(articleServiceMock.updateArticle).toHaveBeenCalledWith(component.article);
81	- done();
82	- });
83	-
84	-});
	@@ -1,69 +0,0 @@	@@ -1,69 +0,0 @@
1	-import {StateConfig, Component, Inject, provide} from 'ng-forward';
2	-import {ArticleService} from "../../../lib/ng-noosfero-api/http/article.service";
3	-import {ProfileService} from "../../../lib/ng-noosfero-api/http/profile.service";
4	-import {NotificationService} from "../../shared/services/notification.service.ts";
5	-
6	-@Component({
7	- selector: 'article-basic-editor',
8	- templateUrl: "app/article/basic-editor/basic-editor.html",
9	- providers: [
10	- provide('articleService', { useClass: ArticleService }),
11	- provide('profileService', { useClass: ProfileService }),
12	- provide('notification', { useClass: NotificationService })
13	- ]
14	-})
15	-@Inject(ArticleService, ProfileService, "$state", NotificationService, "$stateParams", "$window")
16	-export class BasicEditorComponent {
17	-
18	- article: noosfero.Article = <noosfero.Article>{ type: "TextArticle" };
19	- parent: noosfero.Article = <noosfero.Article>{};
20	-
21	- id: number;
22	- parentId: number;
23	- profileIdentifier: string;
24	-
25	- constructor(private articleService: ArticleService,
26	- private profileService: ProfileService,
27	- private $state: ng.ui.IStateService,
28	- private notification: NotificationService,
29	- private $stateParams: ng.ui.IStateParamsService,
30	- private $window: ng.IWindowService) {
31	-
32	- this.parentId = this.$stateParams['parent_id'];
33	- this.profileIdentifier = this.$stateParams["profile"];
34	- this.id = this.$stateParams['id'];
35	-
36	- if (this.parentId) {
37	- this.articleService.get(this.parentId).then((result: noosfero.RestResult<noosfero.Article>) => {
38	- this.parent = result.data;
39	- });
40	- }
41	- if (this.id) {
42	- this.articleService.get(this.id).then((result: noosfero.RestResult<noosfero.Article>) => {
43	- this.article = result.data;
44	- this.article.name = this.article.title; // FIXME
45	- });
46	- }
47	- }
48	-
49	- save() {
50	- this.profileService.setCurrentProfileByIdentifier(this.profileIdentifier).then((profile: noosfero.Profile) => {
51	- if (this.id) {
52	- return this.articleService.updateArticle(this.article);
53	- } else {
54	- return this.articleService.createInParent(this.parentId, this.article);
55	- }
56	- }).then((response: noosfero.RestResult<noosfero.Article>) => {
57	- let article = (<noosfero.Article>response.data);
58	- this.$state.go('main.profile.page', { page: article.path, profile: article.profile.identifier });
59	- this.notification.success({ title: "article.basic_editor.success.title", message: "article.basic_editor.success.message" });
60	- }).catch(() => {
61	- this.notification.error({ message: "article.basic_editor.save.failed" });
62	- });
63	- }
64	-
65	- cancel() {
66	- this.$window.history.back();
67	- }
68	-
69	-}
	@@ -1,34 +0,0 @@	@@ -1,34 +0,0 @@
1	-<div class="basic-editor">
2	- <div class="row">
3	- <div class="col-md-1"></div>
4	- <div class="col-md-8">
5	- <form>
6	- <div class="form-group">
7	- <label for="titleInput">{{"article.basic_editor.title" \| translate}}</label>
8	- <input type="text" class="form-control" id="titleInput" placeholder="{{'article.basic_editor.title' \| translate}}" ng-model="vm.article.name">
9	- </div>
10	- <div class="form-group">
11	- <label for="bodyInput">{{"article.basic_editor.body" \| translate}}</label>
12	- <html-editor [(value)]="vm.article.body"></html-editor>
13	- </div>
14	- <button type="submit" class="btn btn-default" ng-click="vm.save()">{{"article.basic_editor.save" \| translate}}</button>
15	- <button type="button" class="btn btn-danger" ng-click="vm.cancel()">{{"article.basic_editor.cancel" \| translate}}</button>
16	- </form>
17	- </div>
18	- <div class="side-options">
19	- <div class="visibility panel panel-default">
20	- <div class="panel-heading">{{"article.basic_editor.visibility" \| translate}}</div>
21	- <div class="panel-body">
22	- <div>
23	- <input type="radio" ng-model="vm.article.published" ng-value="true">
24	- <i class="fa fa-unlock fa-fw"></i> {{"article.basic_editor.visibility.public" \| translate}}
25	- </div>
26	- <div>
27	- <input type="radio" ng-model="vm.article.published" ng-value="false">
28	- <i class="fa fa-lock fa-fw"></i> {{"article.basic_editor.visibility.private" \| translate}}
29	- </div>
30	- </div>
31	- </div>
32	- </div>
33	- </div>
34	-</div>
	@@ -1,21 +0,0 @@	@@ -1,21 +0,0 @@
1	-.basic-editor {
2	- @extend .container-fluid;
3	- padding: 0 1%;
4	-
5	- .side-options {
6	- @extend .col-md-3;
7	- margin-top: 25px;
8	-
9	- .visibility {
10	- .panel-heading {
11	- background-color: transparent;
12	- font-weight: bold;
13	- }
14	- .panel-body {
15	- i {
16	- color: #A5A5A5;
17	- }
18	- }
19	- }
20	- }
21	-}
@@ -0,0 +1,27 @@		@@ -0,0 +1,27 @@
	1	+import {Component, Input, Inject} from 'ng-forward';
	2	+
	3	+@Component({
	4	+ selector: 'article-editor',
	5	+ template: "not-used"
	6	+})
	7	+@Inject("$element", "$scope", "$injector", "$compile")
	8	+export class ArticleEditorComponent {
	9	+
	10	+ @Input() article: noosfero.Article;
	11	+
	12	+ constructor(
	13	+ private $element: any,
	14	+ private $scope: ng.IScope,
	15	+ private $injector: ng.auto.IInjectorService,
	16	+ private $compile: ng.ICompileService) { }
	17	+
	18	+ ngOnInit() {
	19	+ let articleType = this.article.type.replace(/::/, '');
	20	+ let specificDirective = `${articleType.charAt(0).toLowerCase()}${articleType.substring(1)}Editor`;
	21	+ let directiveName = "article-basic-editor";
	22	+ if (this.$injector.has(specificDirective + 'Directive')) {
	23	+ directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
	24	+ }
	25	+ this.$element.replaceWith(this.$compile('<' + directiveName + ' [article]="ctrl.article"></' + directiveName + '>')(this.$scope));
	26	+ }
	27	+}
@@ -0,0 +1,10 @@		@@ -0,0 +1,10 @@
	1	+import {Component, Input} from 'ng-forward';
	2	+
	3	+@Component({
	4	+ selector: 'article-basic-editor',
	5	+ templateUrl: "app/article/cms/basic-editor/basic-editor.html"
	6	+})
	7	+export class BasicEditorComponent {
	8	+
	9	+ @Input() article: noosfero.Article;
	10	+}
@@ -0,0 +1,10 @@		@@ -0,0 +1,10 @@
	1	+<form>
	2	+ <div class="form-group">
	3	+ <label for="titleInput">{{"article.basic_editor.title" \| translate}}</label>
	4	+ <input type="text" class="form-control" id="titleInput" placeholder="{{'article.basic_editor.title' \| translate}}" ng-model="ctrl.article.name">
	5	+ </div>
	6	+ <div class="form-group">
	7	+ <label for="bodyInput">{{"article.basic_editor.body" \| translate}}</label>
	8	+ <html-editor [(value)]="ctrl.article.body"></html-editor>
	9	+ </div>
	10	+</form>
@@ -0,0 +1,11 @@		@@ -0,0 +1,11 @@
	1	+import {Component, Input} from 'ng-forward';
	2	+
	3	+@Component({
	4	+ selector: 'article-basic-options',
	5	+ templateUrl: "app/article/cms/basic-options/basic-options.html"
	6	+})
	7	+export class BasicOptionsComponent {
	8	+
	9	+ @Input() article: noosfero.Article;
	10	+
	11	+}
@@ -0,0 +1,15 @@		@@ -0,0 +1,15 @@
	1	+<div class="side-options">
	2	+ <div class="visibility panel panel-default">
	3	+ <div class="panel-heading">{{"article.basic_editor.visibility" \| translate}}</div>
	4	+ <div class="panel-body">
	5	+ <div>
	6	+ <input type="radio" ng-model="ctrl.article.published" ng-value="true">
	7	+ <i class="fa fa-unlock fa-fw"></i> {{"article.basic_editor.visibility.public" \| translate}}
	8	+ </div>
	9	+ <div>
	10	+ <input type="radio" ng-model="ctrl.article.published" ng-value="false">
	11	+ <i class="fa fa-lock fa-fw"></i> {{"article.basic_editor.visibility.private" \| translate}}
	12	+ </div>
	13	+ </div>
	14	+ </div>
	15	+</div>