Fix article component

Victor Costa
1 parent e80763e4
Showing 5 changed files with 50 additions and 54 deletions Show diff stats
src/app/components/noosfero-articles/article/article.directive.ts
src/app/components/noosfero-articles/article/article.html
src/app/components/noosfero-articles/blog/blog.component.ts
src/app/components/noosfero-articles/blog/blog.html
src/app/content-viewer/page.html
 import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
+import {NoosferoArticleBlog} from "../blog/blog.component";
  
 @Component({
     selector: 'noosfero-default-article',
-    templateUrl: 'app/components/noosfero-articles/article/article.html',
-    providers: ['$injector', '$compile']
+    templateUrl: 'app/components/noosfero-articles/article/article.html'
 })
 export class ArticleView {
+
+    @Input() article: any;
+    @Input() profile: any;
+
     constructor() {
         console.log("ARTICLE VIEW");
     }
 }
  
-/**
-* <noosfero-article></noosfero-article>
-*
-*
-*/
-
-@Directive({
-    selector: '[noosfero-article]',
-    providers: []
+@Component({
+    selector: 'noosfero-article',
+    template: '<div></div>',
+    directives: [ArticleView, NoosferoArticleBlog]
 })
-@Inject("$element")
-@Inject("$scope")
-@Inject("$injector")
-@Inject("$compile")
+@Inject("$element", "$scope", "$injector", "$compile")
 export class ArticleDirective {
  
-    constructor($element: any, $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) {
-        var specificDirective = 'noosfero' + $scope["vm"].article.type;
-        if ($injector.has(specificDirective + 'Directive')) {
-            var directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-            $element.replaceWith($compile('<' + directiveName + ' article="vm.article" profile="vm.profile"></' + directiveName + '>')($scope));
-            //$element.html($compile('<' + directiveName + ' article="vm.article" profile="vm.profile"></' + directiveName + '>')(scope))
-        } else {
-            //TODO
+    @Input() article: any;
+    @Input() profile: any;
+    directiveName: string;
+
+    ngOnInit() {
+        let specificDirective = 'noosfero' + this.article.type;
+        this.directiveName = "noosfero-default-article";
+        if (this.$injector.has(specificDirective + 'Directive')) {
+            this.directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
         }
+        this.$element.replaceWith(this.$compile('<' + this.directiveName + ' [article]="ctrl.article" [profile]="ctrl.profile"></' + this.directiveName + '>')(this.$scope));
     }
-}
  
-//bundle('noosferoApp', ArticleDirective).publish();
+    constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) {
+
+    }
+}
 <div class="article">
   <div class="page-header">
-    <h3 ng-bind="vm.article.title"></h3>
+    <h3 ng-bind="ctrl.article.title"></h3>
   </div>
  
   <div class="sub-header clearfix">
     <div class="page-info pull-right small text-muted">
       <span class="time">
-        <i class="fa fa-clock-o"></i> <span am-time-ago="vm.article.created_at"></span>
+        <i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.article.created_at"></span>
       </span>
-      <span class="author" ng-if="vm.article.author">
+      <span class="author" ng-if="ctrl.article.author">
         <i class="fa fa-user"></i>
-        <a ui-sref="main.profile({profile: vm.article.author.identifier})">
-          <span class="author-name" ng-bind="vm.article.author.name"></span>
+        <a ui-sref="main.profile({profile: ctrl.article.author.identifier})">
+          <span class="author-name" ng-bind="ctrl.article.author.name"></span>
         </a>
       </span>
     </div>
   </div>
  
   <div class="page-body">
-    <div ng-bind-html="vm.article.body"></div>
+    <div ng-bind-html="ctrl.article.body"></div>
   </div>
 </div>
-import {Component, Input} from "ng-forward";
+import {Component, Input, Inject} from "ng-forward";
  
  
 @Component({
     selector: "noosfero-blog",
-    templateUrl: "app/components/noosfero-articles/blog/blog.html",
-    inputs: ["article", "profile"]
+    templateUrl: "app/components/noosfero-articles/blog/blog.html"
 })
+@Inject("noosfero", "$scope")
 export class NoosferoArticleBlog {
+
     @Input() article;
     @Input() profile;
  
@@ -14,12 +15,12 @@ export class NoosferoArticleBlog {
     private perPage: number;
     private currentPage: number;
     private totalPosts: number = 0;
-    constructor(private noosferoService: any) {
-        this.loadPage();
+
+    constructor(private noosfero: any, private $scope) {
     }
  
-    loadPage() {
-        this.noosferoService.articles.one(this.article.id).customGET("children", {
+    ngOnInit() {
+        this.noosfero.articles.one(this.article.id).customGET("children", {
             content_type: "TinyMceArticle",
             per_page: this.perPage,
             page: this.currentPage
@@ -29,4 +30,4 @@ export class NoosferoArticleBlog {
         });
     }
  
-}
 \ No newline at end of file
+}
 <div class="blog">
-  <div class="blog-cover" ng-show="$ctrl.article.image">
-    <img ng-src="{{$ctrl.article.image.url}}" class="img-responsive">
-    <h3 ng-bind="$ctrl.article.title"></h3>
+  <div class="blog-cover" ng-show="ctrl.article.image">
+    <img ng-src="{{ctrl.article.image.url}}" class="img-responsive">
+    <h3 ng-bind="ctrl.article.title"></h3>
   </div>
  
-  <div class="page-header" ng-show="!$ctrl.article.image">
-    <h3 ng-bind="$ctrl.article.title"></h3>
+  <div class="page-header" ng-show="!ctrl.article.image">
+    <h3 ng-bind="ctrl.article.title"></h3>
   </div>
  
   <div>
-    <div ng-repeat="child in $ctrl.posts | orderBy: 'created_at':true">
+    <div ng-repeat="child in ctrl.posts | orderBy: 'created_at':true">
       <div class="page-header">
-        <a class="title" ui-sref="main.profile.page({profile: $ctrl.profile.identifier, page: child.path})"><h4 ng-bind="child.title"></h4></a>
+        <a class="title" ui-sref="main.profile.page({profile: ctrl.profile.identifier, page: child.path})"><h4 ng-bind="child.title"></h4></a>
         <div class="post-lead" ng-bind-html="child.body | truncate: 500: '...': true"></div>
       </div>
     </div>
   </div>
  
-  <pagination ng-model="$ctrl.currentPage" total-items="$ctrl.totalPosts" class="pagination-sm center-block"
-    boundary-links="true" items-per-page="$ctrl.perPage" ng-change="$ctrl.loadPage()"
+  <pagination ng-model="ctrl.currentPage" total-items="ctrl.totalPosts" class="pagination-sm center-block"
+    boundary-links="true" items-per-page="ctrl.perPage" ng-change="ctrl.loadPage()"
     first-text="«" last-text="»" previous-text="‹" next-text="›">
   </pagination>
 </div>
-console.log("HERE CONTENT VIEWER");
-
-{{vm.article}}
-
-{{vm.profile}}
-<div noosfero-article article="vm.article" profile="vm.profile"></div>
+<noosfero-article ng-if="vm.article" [article]="vm.article" [profile]="vm.profile"></noosfero-article>
1	1	import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
	2	+import {NoosferoArticleBlog} from "../blog/blog.component";
2	3
3	4	@Component({
4	5	selector: 'noosfero-default-article',
5		- templateUrl: 'app/components/noosfero-articles/article/article.html',
6		- providers: ['$injector', '$compile']
	6	+ templateUrl: 'app/components/noosfero-articles/article/article.html'
7	7	})
8	8	export class ArticleView {
	9	+
	10	+ @Input() article: any;
	11	+ @Input() profile: any;
	12	+
9	13	constructor() {
10	14	console.log("ARTICLE VIEW");
11	15	}
12	16	}
13	17
14		-/**
15		-* <noosfero-article></noosfero-article>
16		-*
17		-*
18		-*/
19		-
20		-@Directive({
21		- selector: '[noosfero-article]',
22		- providers: []
	18	+@Component({
	19	+ selector: 'noosfero-article',
	20	+ template: '<div></div>',
	21	+ directives: [ArticleView, NoosferoArticleBlog]
23	22	})
24		-@Inject("$element")
25		-@Inject("$scope")
26		-@Inject("$injector")
27		-@Inject("$compile")
	23	+@Inject("$element", "$scope", "$injector", "$compile")
28	24	export class ArticleDirective {
29	25
30		- constructor($element: any, $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) {
31		- var specificDirective = 'noosfero' + $scope["vm"].article.type;
32		- if ($injector.has(specificDirective + 'Directive')) {
33		- var directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
34		- $element.replaceWith($compile('<' + directiveName + ' article="vm.article" profile="vm.profile"></' + directiveName + '>')($scope));
35		- //$element.html($compile('<' + directiveName + ' article="vm.article" profile="vm.profile"></' + directiveName + '>')(scope))
36		- } else {
37		- //TODO
	26	+ @Input() article: any;
	27	+ @Input() profile: any;
	28	+ directiveName: string;
	29	+
	30	+ ngOnInit() {
	31	+ let specificDirective = 'noosfero' + this.article.type;
	32	+ this.directiveName = "noosfero-default-article";
	33	+ if (this.$injector.has(specificDirective + 'Directive')) {
	34	+ this.directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
38	35	}
	36	+ this.$element.replaceWith(this.$compile('<' + this.directiveName + ' [article]="ctrl.article" [profile]="ctrl.profile"></' + this.directiveName + '>')(this.$scope));
39	37	}
40		-}
41	38
42		-//bundle('noosferoApp', ArticleDirective).publish();
	39	+ constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) {
	40	+
	41	+ }
	42	+}
...	...
1	1	<div class="article">
2	2	<div class="page-header">
3		- <h3 ng-bind="vm.article.title"></h3>
	3	+ <h3 ng-bind="ctrl.article.title"></h3>
4	4	</div>
5	5
6	6	<div class="sub-header clearfix">
7	7	<div class="page-info pull-right small text-muted">
8	8	<span class="time">
9		- <i class="fa fa-clock-o"></i> <span am-time-ago="vm.article.created_at"></span>
	9	+ <i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.article.created_at"></span>
10	10	</span>
11		- <span class="author" ng-if="vm.article.author">
	11	+ <span class="author" ng-if="ctrl.article.author">
12	12	<i class="fa fa-user"></i>
13		- <a ui-sref="main.profile({profile: vm.article.author.identifier})">
14		- <span class="author-name" ng-bind="vm.article.author.name"></span>
	13	+ <a ui-sref="main.profile({profile: ctrl.article.author.identifier})">
	14	+ <span class="author-name" ng-bind="ctrl.article.author.name"></span>
15	15	</a>
16	16	</span>
17	17	</div>
18	18	</div>
19	19
20	20	<div class="page-body">
21		- <div ng-bind-html="vm.article.body"></div>
	21	+ <div ng-bind-html="ctrl.article.body"></div>
22	22	</div>
23	23	</div>
...	...
1		-import {Component, Input} from "ng-forward";
	1	+import {Component, Input, Inject} from "ng-forward";
2	2
3	3
4	4	@Component({
5	5	selector: "noosfero-blog",
6		- templateUrl: "app/components/noosfero-articles/blog/blog.html",
7		- inputs: ["article", "profile"]
	6	+ templateUrl: "app/components/noosfero-articles/blog/blog.html"
8	7	})
	8	+@Inject("noosfero", "$scope")
9	9	export class NoosferoArticleBlog {
	10	+
10	11	@Input() article;
11	12	@Input() profile;
12	13
...	...	@@ -14,12 +15,12 @@ export class NoosferoArticleBlog {
14	15	private perPage: number;
15	16	private currentPage: number;
16	17	private totalPosts: number = 0;
17		- constructor(private noosferoService: any) {
18		- this.loadPage();
	18	+
	19	+ constructor(private noosfero: any, private $scope) {
19	20	}
20	21
21		- loadPage() {
22		- this.noosferoService.articles.one(this.article.id).customGET("children", {
	22	+ ngOnInit() {
	23	+ this.noosfero.articles.one(this.article.id).customGET("children", {
23	24	content_type: "TinyMceArticle",
24	25	per_page: this.perPage,
25	26	page: this.currentPage
...	...	@@ -29,4 +30,4 @@ export class NoosferoArticleBlog {
29	30	});
30	31	}
31	32
32		-}
33	33	\ No newline at end of file
	34	+}
...	...
1	1	<div class="blog">
2		- <div class="blog-cover" ng-show="$ctrl.article.image">
3		- <img ng-src="{{$ctrl.article.image.url}}" class="img-responsive">
4		- <h3 ng-bind="$ctrl.article.title"></h3>
	2	+ <div class="blog-cover" ng-show="ctrl.article.image">
	3	+ <img ng-src="{{ctrl.article.image.url}}" class="img-responsive">
	4	+ <h3 ng-bind="ctrl.article.title"></h3>
5	5	</div>
6	6
7		- <div class="page-header" ng-show="!$ctrl.article.image">
8		- <h3 ng-bind="$ctrl.article.title"></h3>
	7	+ <div class="page-header" ng-show="!ctrl.article.image">
	8	+ <h3 ng-bind="ctrl.article.title"></h3>
9	9	</div>
10	10
11	11	<div>
12		- <div ng-repeat="child in $ctrl.posts \| orderBy: 'created_at':true">
	12	+ <div ng-repeat="child in ctrl.posts \| orderBy: 'created_at':true">
13	13	<div class="page-header">
14		- <a class="title" ui-sref="main.profile.page({profile: $ctrl.profile.identifier, page: child.path})"><h4 ng-bind="child.title"></h4></a>
	14	+ <a class="title" ui-sref="main.profile.page({profile: ctrl.profile.identifier, page: child.path})"><h4 ng-bind="child.title"></h4></a>
15	15	<div class="post-lead" ng-bind-html="child.body \| truncate: 500: '...': true"></div>
16	16	</div>
17	17	</div>
18	18	</div>
19	19
20		- <pagination ng-model="$ctrl.currentPage" total-items="$ctrl.totalPosts" class="pagination-sm center-block"
21		- boundary-links="true" items-per-page="$ctrl.perPage" ng-change="$ctrl.loadPage()"
	20	+ <pagination ng-model="ctrl.currentPage" total-items="ctrl.totalPosts" class="pagination-sm center-block"
	21	+ boundary-links="true" items-per-page="ctrl.perPage" ng-change="ctrl.loadPage()"
22	22	first-text="«" last-text="»" previous-text="‹" next-text="›">
23	23	</pagination>
24	24	</div>
...	...
1		-console.log("HERE CONTENT VIEWER");
2		-
3		-{{vm.article}}
4		-
5		-{{vm.profile}}
6		-<div noosfero-article article="vm.article" profile="vm.profile"></div>
	1	+<noosfero-article ng-if="vm.article" [article]="vm.article" [profile]="vm.profile"></noosfero-article>
...	...