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	-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>