Migrate recent documents block to ngforward

Victor Costa
1 parent 7f10a7cf
Showing 7 changed files with 106 additions and 37 deletions Show diff stats
src/app/components/noosfero-blocks/recent-documents/recent-documents.component.js
src/app/components/noosfero-blocks/recent-documents/recent-documents.component.spec.ts
src/app/components/noosfero-blocks/recent-documents/recent-documents.component.ts
src/app/components/noosfero-blocks/recent-documents/recent-documents.html
src/app/index.ts
src/app/main/main.component.ts
src/lib/ng-noosfero-api/http/article.service.ts
@@ -1,33 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('noosferoApp')
-    .component('noosferoRecentDocumentsBlock', {
-      restrict: 'E',
-      templateUrl: 'app/components/noosfero-blocks/recent-documents/recent-documents.html',
-      bindings: {
-          block: '<',
-          owner: '<'
-      },
-      controller: RecentDocumentsController
-    });
-
-  /** @ngInject */
-  function RecentDocumentsController(noosfero, $state) {
-    var vm = this;
-    vm.profile = vm.owner;
-    vm.documents = [];
-
-    vm.openDocument = function(article) {
-      $state.go("main.profile.page", {page: article.path, profile: article.profile.identifier}); 
-    }
-
-    var limit = vm.block.settings.limit || 5;
-    //FIXME get all text articles
-    noosfero.profiles.one(vm.profile.id).one('articles').get({content_type: 'TinyMceArticle', per_page: limit}).then(function(response) {
-      vm.documents = response.data.articles;
-    });
-  }
-
-})();
@@ -0,0 +1,52 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider, Input, provide, Component} from 'ng-forward';
+
+import {RecentDocumentsBlock} from './recent-documents.component';
+
+const htmlTemplate: string = '<noosfero-recent-documents-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-recent-documents-block>';
+
+const tcb = new TestComponentBuilder();
+
+describe("Recent Documents Block Component", () => {
+
+    beforeEach(angular.mock.module("templates"));
+
+    let state = jasmine.createSpyObj("state", ["go"]);
+    let providers = [
+        new Provider('truncateFilter', { useValue: () => { } }),
+        new Provider('stripTagsFilter', { useValue: () => { } }),
+        new Provider('$state', { useValue: state }),
+        new Provider('ArticleService', {
+            useValue: {
+                getByProfile: (profileId: number, filters: any): any => {
+                    return Promise.resolve({ data: { articles: [{ name: "article1" }] } });
+                }
+            }
+        }),
+    ];
+    @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [RecentDocumentsBlock], providers: providers })
+    class BlockContainerComponent {
+        block = { type: 'Block', settings: {} };
+        owner = { name: 'profile-name' };
+        constructor() {
+        }
+    }
+
+    it("get recent documents from the article service", done => {
+        tcb.createAsync(BlockContainerComponent).then(fixture => {
+            let recentDocumentsBlock: RecentDocumentsBlock = fixture.debugElement.componentViewChildren[0].componentInstance;
+            expect(recentDocumentsBlock.documents).toEqual([{ name: "article1" }]);
+            done();
+        });
+    });
+
+    it("go to article page when open a document", done => {
+        tcb.createAsync(BlockContainerComponent).then(fixture => {
+            let recentDocumentsBlock: RecentDocumentsBlock = fixture.debugElement.componentViewChildren[0].componentInstance;
+            recentDocumentsBlock.openDocument({ path: "path", profile: { identifier: "identifier" } });
+            expect(state.go).toHaveBeenCalledWith("main.profile.page", { page: "path", profile: "identifier" });
+            done();
+        });
+    });
+
+});
@@ -0,0 +1,35 @@
+import {Component, Inject, Input} from "ng-forward";
+import {ArticleService} from "../../../../lib/ng-noosfero-api/http/article.service";
+
+@Component({
+    selector: "noosfero-recent-documents-block",
+    templateUrl: 'app/components/noosfero-blocks/recent-documents/recent-documents.html'
+})
+@Inject(ArticleService, "$state")
+export class RecentDocumentsBlock {
+
+    @Input() block: any;
+    @Input() owner: any;
+
+    profile: any;
+    documents: any;
+
+    constructor(private ArticleService: ArticleService, private $state: any) {
+    }
+
+    ngOnInit() {
+        this.profile = this.owner;
+        this.documents = [];
+
+        var limit = (this.block && this.block.settings) ? this.block.settings.limit : null || 5;
+        //FIXME get all text articles
+        this.ArticleService.getByProfile(this.profile.id, { content_type: 'TinyMceArticle', per_page: limit }).then((response: any) => {
+            this.documents = response.data.articles;
+        });
+    }
+
+    openDocument(article: any) {
+        this.$state.go("main.profile.page", { page: article.path, profile: article.profile.identifier });
+    }
+
+}
-<div deckgrid source="$ctrl.documents" class="deckgrid">
-  <div class="a-card panel media" ng-click="mother.$ctrl.openDocument(card);">
+<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>
@@ -47,7 +47,6 @@ require(&quot;./components/noosfero-activities/activities.component.js&quot;);
 require("./components/noosfero-activities/activity/activity.component.js");
 require("./components/noosfero-blocks/members-block/members-block.component.js");
 require("./components/noosfero-blocks/profile-image/profile-image.component.js");
-require("./components/noosfero-blocks/recent-documents/recent-documents.component.js");
 require("./components/noosfero/noosfero-template.filter.js");
 require("./components/noosfero/noosfero.service.js");
 require("./components/noosfero/profile-image/profile-image.component.js");
@@ -7,6 +7,7 @@ import {Profile} from &quot;../profile/profile.component&quot;;
 import {Boxes} from "../components/noosfero-boxes/boxes.component";
 import {Block} from "../components/noosfero-blocks/block.component";
 import {LinkListBlock} from "../components/noosfero-blocks/link-list/link-list.component";
+import {RecentDocumentsBlock} from "../components/noosfero-blocks/recent-documents/recent-documents.component";
 import {AuthService} from "./../components/auth/auth_service";
@@ -30,7 +31,7 @@ export class MainContent {
 @Component({
     selector: 'main',
     template: '<div ng-view></div>',
-    directives: [NoosferoArticleBlog, ArticleView, Boxes, Block, LinkListBlock, MainBlock, Navbar],
+    directives: [NoosferoArticleBlog, ArticleView, Boxes, Block, LinkListBlock, MainBlock, RecentDocumentsBlock, Navbar],
     providers: [AuthService, Session]
 })
 @StateConfig([
@@ -0,0 +1,15 @@
+import { Injectable, Inject } from "ng-forward";
+
+@Injectable()
+@Inject("Restangular")
+export class ArticleService {
+
+    constructor(private Restangular: any) {
+
+    }
+
+    getByProfile(profileId: number, filters: any) {
+        return this.Restangular.service('profiles').one(profileId).one('articles').get(filters);
+    }
+
+}
	@@ -1,33 +0,0 @@	@@ -1,33 +0,0 @@
1	-(function() {
2	- 'use strict';
3	-
4	- angular
5	- .module('noosferoApp')
6	- .component('noosferoRecentDocumentsBlock', {
7	- restrict: 'E',
8	- templateUrl: 'app/components/noosfero-blocks/recent-documents/recent-documents.html',
9	- bindings: {
10	- block: '<',
11	- owner: '<'
12	- },
13	- controller: RecentDocumentsController
14	- });
15	-
16	- /** @ngInject */
17	- function RecentDocumentsController(noosfero, $state) {
18	- var vm = this;
19	- vm.profile = vm.owner;
20	- vm.documents = [];
21	-
22	- vm.openDocument = function(article) {
23	- $state.go("main.profile.page", {page: article.path, profile: article.profile.identifier});
24	- }
25	-
26	- var limit = vm.block.settings.limit \|\| 5;
27	- //FIXME get all text articles
28	- noosfero.profiles.one(vm.profile.id).one('articles').get({content_type: 'TinyMceArticle', per_page: limit}).then(function(response) {
29	- vm.documents = response.data.articles;
30	- });
31	- }
32	-
33	-})();
@@ -0,0 +1,52 @@		@@ -0,0 +1,52 @@
	1	+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
	2	+import {Provider, Input, provide, Component} from 'ng-forward';
	3	+
	4	+import {RecentDocumentsBlock} from './recent-documents.component';
	5	+
	6	+const htmlTemplate: string = '<noosfero-recent-documents-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-recent-documents-block>';
	7	+
	8	+const tcb = new TestComponentBuilder();
	9	+
	10	+describe("Recent Documents Block Component", () => {
	11	+
	12	+ beforeEach(angular.mock.module("templates"));
	13	+
	14	+ let state = jasmine.createSpyObj("state", ["go"]);
	15	+ let providers = [
	16	+ new Provider('truncateFilter', { useValue: () => { } }),
	17	+ new Provider('stripTagsFilter', { useValue: () => { } }),
	18	+ new Provider('$state', { useValue: state }),
	19	+ new Provider('ArticleService', {
	20	+ useValue: {
	21	+ getByProfile: (profileId: number, filters: any): any => {
	22	+ return Promise.resolve({ data: { articles: [{ name: "article1" }] } });
	23	+ }
	24	+ }
	25	+ }),
	26	+ ];
	27	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [RecentDocumentsBlock], providers: providers })
	28	+ class BlockContainerComponent {
	29	+ block = { type: 'Block', settings: {} };
	30	+ owner = { name: 'profile-name' };
	31	+ constructor() {
	32	+ }
	33	+ }
	34	+
	35	+ it("get recent documents from the article service", done => {
	36	+ tcb.createAsync(BlockContainerComponent).then(fixture => {
	37	+ let recentDocumentsBlock: RecentDocumentsBlock = fixture.debugElement.componentViewChildren[0].componentInstance;
	38	+ expect(recentDocumentsBlock.documents).toEqual([{ name: "article1" }]);
	39	+ done();
	40	+ });
	41	+ });
	42	+
	43	+ it("go to article page when open a document", done => {
	44	+ tcb.createAsync(BlockContainerComponent).then(fixture => {
	45	+ let recentDocumentsBlock: RecentDocumentsBlock = fixture.debugElement.componentViewChildren[0].componentInstance;
	46	+ recentDocumentsBlock.openDocument({ path: "path", profile: { identifier: "identifier" } });
	47	+ expect(state.go).toHaveBeenCalledWith("main.profile.page", { page: "path", profile: "identifier" });
	48	+ done();
	49	+ });
	50	+ });
	51	+
	52	+});
@@ -0,0 +1,35 @@		@@ -0,0 +1,35 @@
	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-recent-documents-block",
	6	+ templateUrl: 'app/components/noosfero-blocks/recent-documents/recent-documents.html'
	7	+})
	8	+@Inject(ArticleService, "$state")
	9	+export class RecentDocumentsBlock {
	10	+
	11	+ @Input() block: any;
	12	+ @Input() owner: any;
	13	+
	14	+ profile: any;
	15	+ documents: any;
	16	+
	17	+ constructor(private ArticleService: ArticleService, private $state: any) {
	18	+ }
	19	+
	20	+ ngOnInit() {
	21	+ this.profile = this.owner;
	22	+ this.documents = [];
	23	+
	24	+ var limit = (this.block && this.block.settings) ? this.block.settings.limit : null \|\| 5;
	25	+ //FIXME get all text articles
	26	+ this.ArticleService.getByProfile(this.profile.id, { content_type: 'TinyMceArticle', per_page: limit }).then((response: any) => {
	27	+ this.documents = response.data.articles;
	28	+ });
	29	+ }
	30	+
	31	+ openDocument(article: any) {
	32	+ this.$state.go("main.profile.page", { page: article.path, profile: article.profile.identifier });
	33	+ }
	34	+
	35	+}
1	-<div deckgrid source="$ctrl.documents" class="deckgrid">
2	- <div class="a-card panel media" ng-click="mother.$ctrl.openDocument(card);">	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">	3	<div class="author media-left" ng-show="card.author.image">
4	<img ng-src="{{card.author.image.url}}" class="img-circle">	4	<img ng-src="{{card.author.image.url}}" class="img-circle">
5	</div>	5	</div>
@@ -0,0 +1,15 @@		@@ -0,0 +1,15 @@
	1	+import { Injectable, Inject } from "ng-forward";
	2	+
	3	+@Injectable()
	4	+@Inject("Restangular")
	5	+export class ArticleService {
	6	+
	7	+ constructor(private Restangular: any) {
	8	+
	9	+ }
	10	+
	11	+ getByProfile(profileId: number, filters: any) {
	12	+ return this.Restangular.service('profiles').one(profileId).one('articles').get(filters);
	13	+ }
	14	+
	15	+}