Add discussion block for comment paragraph

Victor Costa
1 parent afd487b0
Showing 5 changed files with 148 additions and 2 deletions Show diff stats
src/app/layout/blocks/block.component.ts
src/plugins/comment_paragraph/block/discussion/discussion-block.component.ts
src/plugins/comment_paragraph/block/discussion/discussion-block.html
src/plugins/comment_paragraph/block/discussion/discussion-block.scss
src/plugins/comment_paragraph/index.ts
@@ -11,7 +11,7 @@ export class BlockComponent {
     @Input() owner: any;
  
     ngOnInit() {
-        let blockName = (this.block && this.block.type) ? this.block.type.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : "default-block";
+        let blockName = (this.block && this.block.type) ? this.block.type.replace(/::/, '').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : "default-block";
         this.$element.replaceWith(this.$compile('<noosfero-' + blockName + ' [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-' + blockName + '>')(this.$scope));
     }
  
@@ -0,0 +1,52 @@
+import {Component, Inject, Input} from "ng-forward";
+import {ArticleService} from "../../../../lib/ng-noosfero-api/http/article.service";
+
+@Component({
+    selector: "noosfero-comment-paragraph-plugin-discussion-block",
+    templateUrl: 'plugins/comment_paragraph/block/discussion/discussion-block.html'
+})
+@Inject(ArticleService, "$state")
+export class DiscussionBlockComponent {
+
+    @Input() block: any;
+    @Input() owner: any;
+
+    profile: any;
+    documents: any;
+
+    documentsLoaded: boolean = false;
+
+    constructor(private articleService: ArticleService, 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 = { 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;
+            });
+    }
+
+    openDocument(article: any) {
+        this.$state.go("main.profile.page", { page: article.path, profile: article.profile.identifier });
+    }
+
+}
@@ -0,0 +1,26 @@
+<div deckgrid source="ctrl.documents" class="deckgrid">
+  <div class="a-card panel media" ng-click="mother.ctrl.openDocument(card);">
+      <div class="author media-left" ng-show="card.author.image">
+        <img ng-src="{{card.author.image.url}}" class="img-circle">
+      </div>
+      <div class="header media-body">
+        <h5 class="title media-heading" ng-bind="card.title"></h5>
+
+        <div class="subheader">
+          <span class="time">
+            <i class="fa fa-clock-o"></i>
+            <span class="start-date date" ng-show="card.start_date">
+              <span class="description">{{"comment-paragraph-plugin.discussion.editor.start_date.label" | translate}}</span>
+              <span class="value">{{card.start_date | amDateFormat:'DD/MM/YYYY'}}</span>
+            </span>
+            <span class="end-date date" ng-show="card.end_date">
+              <span class="description">{{"comment-paragraph-plugin.discussion.editor.end_date.label" | translate}}</span>
+              <span class="value">{{card.end_date | amDateFormat:'DD/MM/YYYY'}}</span>
+            </span>
+          </span>
+        </div>
+      </div>
+      <img ng-show="card.image" ng-src="{{card.image.url}}" class="img-responsive article-image">
+      <div class="post-lead" ng-bind-html="card.body | stripTags | truncate: 100: '...': true"></div>
+  </div>
+</div>
@@ -0,0 +1,67 @@
+.block {
+    noosfero-comment-paragraph-plugin-discussion-block {
+    .deckgrid[deckgrid]::before {
+      font-size: 0;
+      visibility: hidden;
+    }
+    .author {
+      img {
+        width: 30px;
+        height: 30px;
+      }
+    }
+    .header {
+      .subheader {
+        color: #C1C1C1;
+        font-size: 10px;
+      }
+    }
+    .post-lead {
+      color: #8E8E8E;
+      font-size: 14px;
+    }
+    .article-image {
+      margin: 10px 0;
+    }
+  }
+
+  .col-md-2-5 {
+    .deckgrid[deckgrid]::before {
+      content: '1 .deck-column';
+    }
+  }
+
+  .col-md-7 {
+    .block.recentdocumentsblock {
+      background-color: transparent;
+      border: 0;
+
+      .deckgrid[deckgrid]::before {
+          content: '3 .deck-column';
+      }
+
+      .panel-heading {
+        display: none;
+      }
+      .panel-body {
+        padding: 0;
+      }
+
+      .deckgrid {
+        .column {
+          float: left;
+        }
+
+        .deck-column {
+          @extend .col-md-4;
+          padding: 0;
+
+          .a-card {
+            padding: 10px;
+            margin: 3px;
+          }
+        }
+      }
+    }
+  }
+}
@@ -3,6 +3,7 @@ import {CommentParagraphArticleButtonHotspotComponent} from &quot;./hotspot/comment-p
 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];
+export let mainComponents: any = [AllowCommentComponent, DiscussionEditorComponent, DiscussionBlockComponent];
 export let hotspots: any = [CommentParagraphArticleButtonHotspotComponent, CommentParagraphFormHotspotComponent, CommentParagraphArticleContentHotspotComponent];
...	...	@@ -11,7 +11,7 @@ export class BlockComponent {
11	11	@Input() owner: any;
12	12
13	13	ngOnInit() {
14		- let blockName = (this.block && this.block.type) ? this.block.type.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : "default-block";
	14	+ let blockName = (this.block && this.block.type) ? this.block.type.replace(/::/, '').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : "default-block";
15	15	this.$element.replaceWith(this.$compile('<noosfero-' + blockName + ' [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-' + blockName + '>')(this.$scope));
16	16	}
17	17
...	...
...	...	@@ -0,0 +1,52 @@
	1	+import {Component, Inject, Input} from "ng-forward";
	2	+import {ArticleService} from "../../../../lib/ng-noosfero-api/http/article.service";
	3	+
	4	+@Component({
	5	+ selector: "noosfero-comment-paragraph-plugin-discussion-block",
	6	+ templateUrl: 'plugins/comment_paragraph/block/discussion/discussion-block.html'
	7	+})
	8	+@Inject(ArticleService, "$state")
	9	+export class DiscussionBlockComponent {
	10	+
	11	+ @Input() block: any;
	12	+ @Input() owner: any;
	13	+
	14	+ profile: any;
	15	+ documents: any;
	16	+
	17	+ documentsLoaded: boolean = false;
	18	+
	19	+ constructor(private articleService: ArticleService, private $state: any) { }
	20	+
	21	+ ngOnInit() {
	22	+ this.profile = this.owner;
	23	+ this.documents = [];
	24	+
	25	+ let limit = ((this.block && this.block.settings) ? this.block.settings.limit : null) \|\| 50;
	26	+ let params = { content_type: 'CommentParagraphPlugin::Discussion', per_page: limit, order: 'start_date DESC' };
	27	+ let now = new Date().toISOString();
	28	+ switch (this.block.settings['discussion_status']) {
	29	+ case 0:
	30	+ params['from_start_date'] = now;
	31	+ break;
	32	+ case 1:
	33	+ params['until_start_date'] = now;
	34	+ params['from_end_date'] = now;
	35	+ break;
	36	+ case 2:
	37	+ params['until_end_date'] = now;
	38	+ break;
	39	+ }
	40	+ console.log(this.block.settings['discussion_status']);
	41	+ this.articleService.getByProfile(this.profile, params)
	42	+ .then((result: noosfero.RestResult<noosfero.Article[]>) => {
	43	+ this.documents = <noosfero.Article[]>result.data;
	44	+ this.documentsLoaded = true;
	45	+ });
	46	+ }
	47	+
	48	+ openDocument(article: any) {
	49	+ this.$state.go("main.profile.page", { page: article.path, profile: article.profile.identifier });
	50	+ }
	51	+
	52	+}
...	...
...	...	@@ -0,0 +1,26 @@
	1	+<div deckgrid source="ctrl.documents" class="deckgrid">
	2	+ <div class="a-card panel media" ng-click="mother.ctrl.openDocument(card);">
	3	+ <div class="author media-left" ng-show="card.author.image">
	4	+ <img ng-src="{{card.author.image.url}}" class="img-circle">
	5	+ </div>
	6	+ <div class="header media-body">
	7	+ <h5 class="title media-heading" ng-bind="card.title"></h5>
	8	+
	9	+ <div class="subheader">
	10	+ <span class="time">
	11	+ <i class="fa fa-clock-o"></i>
	12	+ <span class="start-date date" ng-show="card.start_date">
	13	+ <span class="description">{{"comment-paragraph-plugin.discussion.editor.start_date.label" \| translate}}</span>
	14	+ <span class="value">{{card.start_date \| amDateFormat:'DD/MM/YYYY'}}</span>
	15	+ </span>
	16	+ <span class="end-date date" ng-show="card.end_date">
	17	+ <span class="description">{{"comment-paragraph-plugin.discussion.editor.end_date.label" \| translate}}</span>
	18	+ <span class="value">{{card.end_date \| amDateFormat:'DD/MM/YYYY'}}</span>
	19	+ </span>
	20	+ </span>
	21	+ </div>
	22	+ </div>
	23	+ <img ng-show="card.image" ng-src="{{card.image.url}}" class="img-responsive article-image">
	24	+ <div class="post-lead" ng-bind-html="card.body \| stripTags \| truncate: 100: '...': true"></div>
	25	+ </div>
	26	+</div>
...	...
...	...	@@ -0,0 +1,67 @@
	1	+.block {
	2	+ noosfero-comment-paragraph-plugin-discussion-block {
	3	+ .deckgrid[deckgrid]::before {
	4	+ font-size: 0;
	5	+ visibility: hidden;
	6	+ }
	7	+ .author {
	8	+ img {
	9	+ width: 30px;
	10	+ height: 30px;
	11	+ }
	12	+ }
	13	+ .header {
	14	+ .subheader {
	15	+ color: #C1C1C1;
	16	+ font-size: 10px;
	17	+ }
	18	+ }
	19	+ .post-lead {
	20	+ color: #8E8E8E;
	21	+ font-size: 14px;
	22	+ }
	23	+ .article-image {
	24	+ margin: 10px 0;
	25	+ }
	26	+ }
	27	+
	28	+ .col-md-2-5 {
	29	+ .deckgrid[deckgrid]::before {
	30	+ content: '1 .deck-column';
	31	+ }
	32	+ }
	33	+
	34	+ .col-md-7 {
	35	+ .block.recentdocumentsblock {
	36	+ background-color: transparent;
	37	+ border: 0;
	38	+
	39	+ .deckgrid[deckgrid]::before {
	40	+ content: '3 .deck-column';
	41	+ }
	42	+
	43	+ .panel-heading {
	44	+ display: none;
	45	+ }
	46	+ .panel-body {
	47	+ padding: 0;
	48	+ }
	49	+
	50	+ .deckgrid {
	51	+ .column {
	52	+ float: left;
	53	+ }
	54	+
	55	+ .deck-column {
	56	+ @extend .col-md-4;
	57	+ padding: 0;
	58	+
	59	+ .a-card {
	60	+ padding: 10px;
	61	+ margin: 3px;
	62	+ }
	63	+ }
	64	+ }
	65	+ }
	66	+ }
	67	+}
...	...
...	...	@@ -3,6 +3,7 @@ import {CommentParagraphArticleButtonHotspotComponent} from "./hotspot/comment-p
3	3	import {CommentParagraphFormHotspotComponent} from "./hotspot/comment-paragraph-form.component";
4	4	import {DiscussionEditorComponent} from "./article/cms/discussion-editor/discussion-editor.component";
5	5	import {CommentParagraphArticleContentHotspotComponent} from "./hotspot/article-content/article-content.component";
	6	+import {DiscussionBlockComponent} from "./block/discussion/discussion-block.component";
6	7
7		-export let mainComponents: any = [AllowCommentComponent, DiscussionEditorComponent];
	8	+export let mainComponents: any = [AllowCommentComponent, DiscussionEditorComponent, DiscussionBlockComponent];
8	9	export let hotspots: any = [CommentParagraphArticleButtonHotspotComponent, CommentParagraphFormHotspotComponent, CommentParagraphArticleContentHotspotComponent];
...	...