Display content block initial version

Carlos Purificação · Michel Felipe
1 parent 29d769ad
Showing 12 changed files with 235 additions and 13 deletions Show diff stats
src/app/layout/blocks/display-content/display-content-block.component.spec.ts
src/app/layout/blocks/display-content/display-content-block.component.ts
src/app/layout/blocks/display-content/display-content-block.html
src/app/layout/blocks/display-content/display-content-block.scss
src/app/layout/blocks/display-content/index.ts
src/app/main/main.component.ts
src/languages/en.json
src/languages/pt.json
src/lib/ng-noosfero-api/interfaces/article.ts
src/lib/ng-noosfero-api/interfaces/block.ts
src/lib/ng-noosfero-api/interfaces/section.ts
src/lib/ng-noosfero-api/interfaces/settings.ts
@@ -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,55 @@
+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;
+
+    /**
+     * 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);
+    }
+
+    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;
+        });
+    }
+
+    /**
+     * 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";
@@ -9,18 +9,16 @@ import {BoxesComponent} from &quot;../layout/boxes/boxes.component&quot;;
 import {BlockComponent} from "../layout/blocks/block.component";
 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 {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 {PeopleBlockComponent} from "../layout/blocks/people-block/people-block.component";
+import {DisplayContentBlockComponent} from "../layout/blocks/display-content/display-content-block.component";
+import {LinkListBlockComponent} from "./../layout/blocks/link-list/link-list.component";
+import {RecentDocumentsBlockComponent} from "../layout/blocks/recent-documents/recent-documents.component";
+import {ProfileImageBlockComponent} from "../layout/blocks/profile-image-block/profile-image-block.component";
+import {RawHTMLBlockComponent} from "../layout/blocks/raw-html/raw-html.component";
 import {StatisticsBlockComponent} from "../layout/blocks/statistics/statistics-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";
-
+import {MembersBlockComponent} from "./../layout/blocks/members-block/members-block.component";
+import {CommunitiesBlockComponent} from "./../layout/blocks/communities-block/communities-block.component";
 import {NoosferoTemplate} from "../shared/pipes/noosfero-template.filter";
 import {DateFormat} from "../shared/pipes/date-format.filter";
@@ -83,7 +81,7 @@ export class EnvironmentContent {
  * NoosferoTemplate, DateFormat, RawHTMLBlock
  * @description
  *  The Main controller for the Noosfero Angular Theme application.
- *
+ * 
  *  The main route '/' is defined as the URL for this controller, which routes
  * requests to the {@link main.MainContentComponent} controller and also, the '/profile' route,
  * which routes requests to the {@link profile.Profile} controller. See {@link profile.Profile}
@@ -94,7 +92,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,
@@ -37,6 +37,7 @@
   "comment.post.success.message": "Comment saved!",
   "comment.reply": "reply",
   "article.actions.edit": "Edit",
+  "article.actions.read_more": "Read More",
   "article.basic_editor.title": "Title",
   "article.basic_editor.body": "Body",
   "article.basic_editor.save": "Save",
@@ -37,6 +37,7 @@
   "comment.post.success.message": "Comentário salvo com sucesso!",
   "comment.reply": "responder",
   "article.actions.edit": "Editar",
+  "article.actions.read_more": "Ler mais",
   "article.basic_editor.title": "Título",
   "article.basic_editor.body": "Corpo",
   "article.basic_editor.save": "Salvar",
 namespace noosfero {
     export interface Article extends RestModel {
+        abstract: string;
         path: string;
         profile: Profile;
         type: string;
 namespace noosfero {
     export interface Block extends RestModel {
         id: number;
-        settings: any;
+        settings: Settings;
+        limit: number;
         api_content: any;
     }
 }
@@ -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
@@ -0,0 +1,75 @@		@@ -0,0 +1,75 @@
	1	+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
	2	+import {Provider, provide} from 'ng-forward';
	3	+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
	4	+import {providers} from 'ng-forward/cjs/testing/providers';
	5	+import {DisplayContentBlockComponent} from './display-content-block.component';
	6	+import * as helpers from './../../../../spec/helpers';
	7	+
	8	+const htmlTemplate: string = '<noosfero-display-content-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-display-content-block>';
	9	+
	10	+describe("Components", () => {
	11	+
	12	+ describe("Display Content Block Component", () => {
	13	+ let state = jasmine.createSpyObj("state", ["go"]);
	14	+ let providers = [
	15	+ provide('ArticleService', {
	16	+ useValue: helpers.mocks.articleService
	17	+ }),
	18	+ provide('$state', { useValue: state })
	19	+ ].concat(helpers.provideFilters("translateFilter"));
	20	+
	21	+ let sections: noosfero.Section[] = [
	22	+ { value: 'abstract', checked: 'abstract'},
	23	+ { value: 'title', checked: 'title' }
	24	+ ];
	25	+ let settings: noosfero.Settings = {
	26	+ limit: 6,
	27	+ sections: sections
	28	+ };
	29	+
	30	+ let helper: ComponentTestHelper<DisplayContentBlockComponent>;
	31	+
	32	+ beforeEach(angular.mock.module("templates"));
	33	+
	34	+ /**
	35	+ * The beforeEach procedure will initialize the helper and parse
	36	+ * the component according to the given providers. Unfortunetly, in
	37	+ * this mode, the providers and properties given to the construtor
	38	+ * can't be overriden.
	39	+ */
	40	+ beforeEach((done) => {
	41	+ // Create the component bed for the test. Optionally, this could be done
	42	+ // in each test if one needs customization of these parameters per test
	43	+ let cls = createClass({
	44	+ template: htmlTemplate,
	45	+ directives: [DisplayContentBlockComponent],
	46	+ providers: providers,
	47	+ properties: {
	48	+ block: {
	49	+ settings: settings
	50	+ }
	51	+ }
	52	+ });
	53	+ helper = new ComponentTestHelper<DisplayContentBlockComponent>(cls, done);
	54	+ });
	55	+
	56	+ it("verify settings is injected", () => {
	57	+ expect(helper.component.block).not.toBeNull;
	58	+ expect(helper.component.block.settings).not.toBeNull;
	59	+ expect(helper.component.block.settings.limit).toEqual(6);
	60	+ expect(helper.component.block.settings.sections.length).toEqual(3);
	61	+ });
	62	+
	63	+ it("verify abstract is displayed", () => {
	64	+ expect(helper.all("div[ng-bind-html\|='article.abstract']")[0]).not.toBeNull;
	65	+ });
	66	+
	67	+ it("verify title is displayed", () => {
	68	+ expect(helper.all("div > h5")[0]).not.toBeNull;
	69	+ });
	70	+
	71	+ it("verify body is not displayed", () => {
	72	+ expect(helper.all("div[ng-bind-html\|='article.body']")[0]).toBeNull;
	73	+ });
	74	+ });
	75	+});
@@ -0,0 +1,55 @@		@@ -0,0 +1,55 @@
	1	+import {Input, Inject, Component} from "ng-forward";
	2	+import {ArticleService} from "../../../../lib/ng-noosfero-api/http/article.service";
	3	+
	4	+@Component({
	5	+ selector: "noosfero-display-content-block",
	6	+ templateUrl: 'app/layout/blocks/display-content/display-content-block.html',
	7	+})
	8	+@Inject(ArticleService, "$state")
	9	+export class DisplayContentBlockComponent {
	10	+
	11	+ @Input() block: noosfero.Block;
	12	+ @Input() owner: noosfero.Profile;
	13	+
	14	+ profile: noosfero.Profile;
	15	+ articles: noosfero.Article[];
	16	+ sections: noosfero.Section[];
	17	+
	18	+ documentsLoaded: boolean = false;
	19	+
	20	+ /**
	21	+ * This configuration doesn't exists on Noosfero. Statically typing here.
	22	+ */
	23	+ private addDefaultSections() {
	24	+ let author: noosfero.Section = <noosfero.Section>{ value: 'author', checked: 'author' };
	25	+ this.sections.push(author);
	26	+ }
	27	+
	28	+ constructor(private articleService: ArticleService, private $state: ng.ui.IStateService) {
	29	+ }
	30	+
	31	+ ngOnInit() {
	32	+ this.profile = this.owner;
	33	+ let limit = ((this.block && this.block.settings) ? this.block.settings.limit : null) \|\| 5;
	34	+ this.articleService.getByProfile(this.profile, { content_type: 'TinyMceArticle', per_page: limit })
	35	+ .then((result: noosfero.RestResult<noosfero.Article[]>) => {
	36	+ this.articles = <noosfero.Article[]>result.data;
	37	+ this.sections = this.block.settings.sections;
	38	+ // Add sections not defined by Noosfero API
	39	+ this.addDefaultSections();
	40	+ this.documentsLoaded = true;
	41	+ });
	42	+ }
	43	+
	44	+ /**
	45	+ * Returns whether a settings section should be displayed.
	46	+ *
	47	+ */
	48	+ private display(section_name: string): boolean {
	49	+ let section: noosfero.Section = this.sections.find( function(section: noosfero.Section) {
	50	+ return section.value === section_name;
	51	+ });
	52	+ return section !== undefined && section.checked !== undefined;
	53	+ }
	54	+}
	55	+
@@ -0,0 +1,46 @@		@@ -0,0 +1,46 @@
	1	+<div class="{{ctrl.type}}-block">
	2	+ <div ng-repeat="article in ctrl.articles" ui-sref="main.profile.page({profile: ctrl.profile.identifier, page: article.path})"" class="article">
	3	+ <!-- Article Title -->
	4	+ <div class="page-header" ng-if="ctrl.display('title')">
	5	+ <h5 class="title media-heading" ng-bind="article.title"></h3>
	6	+ </div>
	7	+
	8	+ <div class="sub-header clearfix">
	9	+ <!-- Article Abstract and Read More Link -->
	10	+ <div class="post-lead" ng-if="ctrl.display('abstract')">
	11	+ <div ng-bind-html="article.abstract"></div>
	12	+ <a href="#" ui-sref="main.profile.page({profile: ctrl.profile.identifier, page: article.path})">
	13	+ <i class="fa fa-pencil-square-o fa-fw fa-lg"></i> {{"article.actions.read_more" \| translate}}
	14	+ </a>
	15	+ </div>
	16	+ <div class="page-info pull-right small text-muted" ng-if="ctrl.display('publish_date')">
	17	+ <!-- Article Published Date -->
	18	+ <span class="time">
	19	+ <i class="fa fa-clock-o"></i> <span am-time-ago="article.created_at \| dateFormat"></span>
	20	+ </span>
	21	+ <!-- Article Author -->
	22	+ <span class="author" ng-if="ctrl.display('author')">
	23	+ <i class="fa fa-user"></i>
	24	+ <a ui-sref="main.profile.home({profile: article.author.identifier})" ng-if="article.author">
	25	+ <span class="author-name" ng-bind="article.author.name"></span>
	26	+ </a>
	27	+ </span>
	28	+ </div>
	29	+ </div>
	30	+
	31	+ <div class="post-lead">
	32	+ <!-- Article Image -->
	33	+ <img ng-show="ctrl.display('image')" ng-src="{{article.image.url}}" class="img-responsive article-image">
	34	+ <!-- Article Body -->
	35	+ <div ng-bind-html="article.body" ng-show="ctrl.display('body')"></div>
	36	+ </div>
	37	+
	38	+ <!-- Article Tags -->
	39	+ <div ng-if="ctrl.display('tags')" class="post-lead">
	40	+ <div class="label" ng-repeat="tag in article.tag_list">
	41	+ <span class="badge" ng-bind="tag"></span>
	42	+ </div>
	43	+ </div>
	44	+
	45	+ </div>
	46	+</div>
@@ -0,0 +1,17 @@		@@ -0,0 +1,17 @@
	1	+.members-block {
	2	+ .member {
	3	+ img, i.profile-image {
	4	+ width: 60px;
	5	+ }
	6	+ img {
	7	+ display: inline-block;
	8	+ vertical-align: top;
	9	+ }
	10	+ i.profile-image {
	11	+ text-align: center;
	12	+ background-color: #889DB1;
	13	+ color: #F1F1F1;
	14	+ font-size: 4.5em;
	15	+ }
	16	+ }
	17	+}
@@ -0,0 +1,2 @@		@@ -0,0 +1,2 @@
	1	+/* Module Index Entry - generated using the script npm run generate-index */
	2	+export * from "./display-content-block.component";
1		1
2	namespace noosfero {	2	namespace noosfero {
3	export interface Article extends RestModel {	3	export interface Article extends RestModel {
		4	+ abstract: string;
4	path: string;	5	path: string;
5	profile: Profile;	6	profile: Profile;
6	type: string;	7	type: string;
	@@ -0,0 +1,16 @@		@@ -0,0 +1,16 @@
		1	+namespace noosfero {
		2	+ /**
		3	+ * @ngdoc interface
		4	+ * @name noosfero.Section
		5	+ * @description
		6	+ * Represents a block settings section. A Section has a value property,
		7	+ * which represents the Section name, and an optinally checked property which
		8	+ * has the same value as the value property indicating that this property is
		9	+ * selected in the block configuration.
		10	+ */
		11	+ export interface Section {
		12	+
		13	+ value: string;
		14	+ checked: string;
		15	+ }
		16	+}
0	\ No newline at end of file	17	\ No newline at end of file
	@@ -0,0 +1,9 @@		@@ -0,0 +1,9 @@
		1	+namespace noosfero {
		2	+ /**
		3	+ * Represents a noosfero block settings.
		4	+ */
		5	+ export interface Settings {
		6	+ sections: noosfero.Section[];
		7	+ limit: number;
		8	+ }
		9	+}
0	\ No newline at end of file	10	\ No newline at end of file